<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8" />
    <title>Card - Basic</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
    <script src="../../../../../scripts/testing/scripts.js"></script>
    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
  </head>

  <body>
    <ion-app>
      <ion-header>
        <ion-toolbar>
          <ion-title>Card - Basic</ion-title>
        </ion-toolbar>
      </ion-header>

      <ion-content fullscreen="true">
        <ion-card>
          <ion-card-content>
            This is just your basic card with some text to boot. Like it? Keep scrolling...
          </ion-card-content>
        </ion-card>

        <ion-card>
          <ion-card-header>
            <ion-card-subtitle> Subtitle </ion-card-subtitle>
            <ion-card-title> Title </ion-card-title>
          </ion-card-header>

          <ion-card-content>
            The British use the term "header", but the American term "head-shot" the English simply refuse to adopt.
          </ion-card-content>
        </ion-card>

        <ion-card>
          <div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0">
            <img style="transform: rotate(145deg) scale(1.5)" src="/src/components/card/test/img.jpg" />
          </div>
          <ion-card-header translucent>
            <ion-card-subtitle> Subtitle </ion-card-subtitle>
            <ion-card-title> Title </ion-card-title>
          </ion-card-header>

          <ion-card-content style="min-height: 200px"> </ion-card-content>
        </ion-card>

        <ion-card style="color: white">
          <div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0">
            <img style="transform: scale(2)" src="/src/components/card/test/img.jpg" />
          </div>
          <ion-card-header translucent>
            <ion-card-subtitle> Subtitle </ion-card-subtitle>
            <ion-card-title> Title </ion-card-title>
          </ion-card-header>

          <ion-card-content style="padding-top: 100px">
            The British use the term "header", but the American term "head-shot" the English simply refuse to adopt.
          </ion-card-content>
        </ion-card>

        <ion-card>
          <div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0">
            <img src="/src/components/card/test/img.jpg" />
          </div>

          <ion-card-header>
            <ion-card-subtitle> Subtitle </ion-card-subtitle>
            <ion-card-title> Title </ion-card-title>
          </ion-card-header>

          <ion-card-content>
            The British use the term "header", but the American term "head-shot" the English simply refuse to adopt.
          </ion-card-content>
        </ion-card>

        <ion-card>
          <ion-card-content>
            <ion-card-title> Card Title Goes Here </ion-card-title>
            <p>
              Keep close to Nature's heart... and break clear away, once in awhile, and climb a mountain. I am within a
              paragraph element.
            </p>
          </ion-card-content>

          <ion-grid>
            <ion-row>
              <ion-col class="ion-no-padding">
                <ion-button fill="clear" size="small">
                  <ion-icon slot="start" name="star"></ion-icon>
                  Star
                </ion-button>
              </ion-col>
              <ion-col class="ion-no-padding ion-text-right">
                <ion-button fill="clear" size="small" class="ion-activated">
                  <ion-icon slot="start" name="share"></ion-icon>
                  Activated
                </ion-button>
              </ion-col>
            </ion-row>
          </ion-grid>
        </ion-card>

        <ion-card class="cards-list-demo">
          <ion-card-header> Explore Nearby </ion-card-header>

          <ion-list>
            <ion-item>
              <ion-icon name="cart" slot="start"></ion-icon>
              Shopping
            </ion-item>

            <ion-item>
              <ion-icon name="medical" slot="start"></ion-icon>
              Hospital
            </ion-item>

            <ion-item>
              <ion-icon name="cafe" slot="start"></ion-icon>
              Cafe
            </ion-item>

            <ion-item>
              <ion-icon name="paw" slot="start"></ion-icon>
              Dog Park
            </ion-item>

            <ion-item>
              <ion-icon name="beer" slot="start"></ion-icon>
              Pub
            </ion-item>

            <ion-item>
              <ion-icon name="planet" slot="start"></ion-icon>
              Space
            </ion-item>
          </ion-list>
        </ion-card>

        <ion-card>
          <ion-item>
            <ion-avatar slot="start">
              <img src="" />
            </ion-avatar>
            <h2>Card With An Inset Picture</h2>
            <p>Isn't it beautiful</p>
          </ion-item>

          <div>
            <img src="" />
          </div>

          <ion-card-content>
            <p>Hello. I am a paragraph.</p>
          </ion-card-content>

          <ion-grid>
            <ion-row>
              <ion-col class="ion-no-padding">
                <ion-button fill="clear" size="small">
                  <ion-icon slot="start" name="star"></ion-icon>
                  Favorite
                </ion-button>
              </ion-col>
              <ion-col class="ion-no-padding ion-text-center">
                <ion-button fill="clear" size="small">
                  <ion-icon slot="start" name="musical-notes"></ion-icon>
                  Listen
                </ion-button>
              </ion-col>
              <ion-col class="ion-no-padding ion-padding-end ion-text-right ion-align-self-center">
                <ion-note> 11h ago </ion-note>
              </ion-col>
            </ion-row>
          </ion-grid>
        </ion-card>

        <ion-card class="ion-no-margin">
          <div>
            <img src="" />
          </div>

          <ion-card-content> ion-card[no-margin] This card was breaking the border radius. </ion-card-content>

          <ion-grid>
            <ion-row>
              <ion-col class="ion-no-padding">
                <ion-button fill="clear" size="small" color="dark">
                  <ion-icon slot="start" name="star"></ion-icon>
                  Favorite
                </ion-button>
              </ion-col>

              <ion-col class="ion-no-padding ion-text-center">
                <ion-button fill="clear" size="small" color="dark">
                  <ion-icon slot="start" name="musical-notes"></ion-icon>
                  Listen
                </ion-button>
              </ion-col>
              <ion-col class="ion-no-padding ion-text-right">
                <ion-button fill="clear" size="small" color="dark">
                  <ion-icon slot="start" name="share"></ion-icon>
                  Share
                </ion-button>
              </ion-col>
            </ion-row>
          </ion-grid>
        </ion-card>
      </ion-content>
    </ion-app>
  </body>
</html>
